<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张宇骏 - 个人主页</title>
</head>
<style>
    body {
        background: linear-gradient(to right, #c7e6ffff, #0990a1ff);
    }
</style>
<body>
    <!-- 页面头部 -->
    <header>
        <h1>张宇骏</h1>
        <p>Web前端开发软工中外二班学生</p>
        <nav>
            <ul>
                <li><a href="https://gitee.com/zyj1208/zyj1208.git">关于我</a></li>
                <li><a href="https://www.swu.edu.cn/">所在学校</a></li>
                <li><a href="https://gitee.com/zyj1208/zyj1208.git">专业技能</a></li>
                <li><a href="https://gitee.com/zyj1208/zyj1208.git">作品展示</a></li>
                <button id="clickBtn">联系我</button>
                <button id="clickBtn1">Who is my LOVE!</button>
                 <script>
        document.addEventListener('DOMContentLoaded', function() {
            const button = document.getElementById('clickBtn');
            let clickCount = 0;
            
            button.addEventListener('click', function() {
                clickCount++;
                if (clickCount === 1) {
                    alert('电话号码或邮箱');
                } else {
                    alert('电话号码或邮箱');
                }
            });
        });
         document.addEventListener('DOMContentLoaded', function() {
            const button = document.getElementById('clickBtn1');
            let clickCount = 0;
            
            button.addEventListener('click', function() {
                clickCount++;
                if (clickCount === 1) {
                    alert('就是万小姐');
                } else if (clickCount === 2) {
                    alert('还得是万小姐');
                } else if (clickCount === 3) {
                    alert('必须得是万小姐');
                } else {
                    alert('别问了，无论多少次都是万小姐');
                }
            });
        });
    </script>

            </ul>
        </nav>
    </header>

    <!-- 主要内容 -->
    <main>
        <!-- 关于我部分 -->
        <section id="about">
            <h2>关于我</h2>
            <img src="./1567c8a2ea014bfbab9a65d3c7fc3db2.png" alt="个人照片" width="200" height="200">
            <p style="color: blue; text-align: left;">你好！我是张宇骏，一名热爱技术的Web前端开发学生。</p>
            <p style="color: red; text-align: left;">我没有啥经验，但我会努力学习直到擅长使用HTML、CSS和JavaScript创建响应式、交互性强的网站。</p>
            <p style="color: rgb(195, 0, 255); text-align: left;">我热衷于学习新技术，不断提升自己的专业能力，致力于为用户提供优秀的浏览体验。</p>
        </section>

        <!-- 教育背景部分 -->
        <section id="education">
            <h2>教育背景</h2>
            <table border="1">
                <tr>
                    <th>时间</th>
                    <th>学校</th>
                    <th>专业</th>
                    <th>学历</th>
                </tr>
                <tr>
                    <td>2025年-2028年</td>
                    <td>西南大学</td>
                    <td>软件工程</td>
                    <td>本科</td>
                </tr>
            </table>
        </section>

        <!-- 专业技能部分 -->
        <section id="skills">
            <h2>专业技能</h2>
            <ul>
                <li><strong>前端开发：</strong>HTML5、CSS3、JavaScript、jQuery</li>
                <li><strong>前端框架：</strong>Vue.js、React</li>
                <li><strong>工具：</strong>Git、Webpack、VS Code</li>
                <li><strong>其他：</strong>响应式设计、UI/UX基础</li>
            </ul>
        </section>

        <!-- 作品展示部分 -->
        <section id="projects">
            <h2>作品展示</h2>
            <div class="project">
                <h3>1. 个人博客系统</h3>
                <img src="project1.jpg" alt="个人博客系统" width="300">
                <p>使用HTML、CSS、JavaScript和后端技术开发的个人博客系统，支持文章发布、评论等功能。</p>
                <a href="#">查看详情</a>
            </div>
            <div class="project">
                <h3>2. 电商网站前端页面</h3>
                <img src="project2.jpg" alt="电商网站前端页面" width="300">
                <p>为某电商平台开发的响应式前端页面，支持商品展示、购物车等功能。</p>
                <a href="#">查看详情</a>
            </div>
            <div class="project">
                <h3>3. 企业官网</h3>
                <img src="project3.jpg" alt="企业官网" width="300">
                <p>为某科技公司开发的企业官网，展示公司信息、产品和服务。</p>
                <a href="#">查看详情</a>
            </div>
        </section>

        <!-- 联系方式部分 -->
        <section id="contact">
            <h2>联系方式</h2>
            <p>如果你对我的作品感兴趣，或者想了解更多信息，欢迎通过以下方式联系我：</p>
            <ul>
                <li><strong>邮箱：</strong><a href="mailto:qingqingzijin@swu.edu.cn">qingqingzijin@swu.edu.cn</a></li>
                <li><strong>电话：</strong><a href="tel:12312341234">123-1234-1234</a></li>
                <li><strong>GitHub：</strong><a href="https://github.com/qingqingzijin" target="_blank">github.com/qingqingzijin</a></li>
                <li><strong>微信：</strong>qingqingzijin</li>
            </ul>
            
            <!-- 联系表单 -->
            <form action="submit.php" method="post">
                <h3>给我留言</h3>
                <div>
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div>
                    <label for="email">邮箱：</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div>
                    <label for="message">留言内容：</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit">提交</button>
            </form>
        </section>
    </main>

    <!-- 页面底部 -->
    <footer>
        <p>&copy; 2025 青青子衿. 保留所有权利。</p>
    </footer>
</body>
</html>